
import { useState } from 'react'
import { useMount } from 'ahooks'
import { DataMap } from '@grapecity/wijmo.grid'
import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'

const WijmoB0201 = () => {

    const [Data, setData] = useState()



    const countries = "亚洲,欧洲,非洲,大洋洲,南极洲,南美洲,北美洲".split(",")
    const customers = [
        { id: 0, name: 'Paul Perkins', address: '123 Main St' },
        { id: 1, name: 'Susan Smith', address: '456 Grand Ave' },
        { id: 2, name: 'Joan Jett', address: '789 Broad St' },
        { id: 3, name: 'Don Davis', address: '321 Shattuck Ave' },
    ]

    const customerMap = new DataMap(customers, 'id', 'name')

    const getData = () => {
        const data = countries.map((item, i) => ({
            id: i,
            country: item,
            customer: customers[i % customers.length].id,
            active: i % 5 != 0,
            downloads: Math.round(Math.random() * 200000),
            sales: Math.random() * 100000,
            expenses: Math.random() * 50000
        }))
        setData(data)
    }
    useMount(() => { getData() })
    if (Data) {
        return (
            <div className="Page">
                <FlexGrid initialized={{}} itemsSource={Data}>
                    <FlexGridColumn header="Customer" binding="customer" width="1.5*" dataMap={customerMap} />
                    <FlexGridColumn header="Country" binding="country" width="*" dataMap={countries} />
                    <FlexGridColumn header="Downloads" binding="downloads" width="*" format="n0" />
                    <FlexGridColumn header="Sales" binding="sales" width="*" format="n0" />
                    <FlexGridColumn header="Expenses" binding="expenses" width="*" format="n0" />
                </FlexGrid>
            </div>
        )
    }
}

export default WijmoB0201;